<template>
	<view class="cu-w-100">
		<cu-page-bg></cu-page-bg>
		<cu-navbar title="登录 / 注册" :placeholder="true" @leftClick="vk.navigateBack()" :showLeft="true"
			:leftIconColor="{color:backgroundStyle.color}" :titleStyle="{color:backgroundStyle.color}"
			:style="getBackgroundStyle" bgColor="rgb(255,255,255,0)"></cu-navbar>
		<view class="cu-w-100">
			<view class="cu-pt-50">
				<view class="cu-w-100 cu-mt-50 cu-row cu-j-center">
					<image class="cu-mt-50" style="border-radius: 50%;width: 200rpx;height: 200rpx;" mode="aspectFill"
						src="/static/logo.png">
					</image>
				</view>
				<view class="cu-w-100 cu-row cu-j-center">
					<image @click="loginByWeixin('login')" style="width: 400rpx;margin-top: 100rpx;" src="./../static/weixin.png"
						mode="widthFix"></image>
				</view>
				<view class="cu-w-100 cu-row cu-j-center cu-my-40 cu-font-sm">
					<checkbox-group @change="event('checkboxChange')">
						<label>
							<checkbox :checked="isChecked" style="transform:scale(0.7)" value="true" />阅读并同意
							<text @click="vk.myfn.gotoPage('/pages/oauth/yhxy/index','navigate')" class="cu-text-primary cu-border-bottom cu-border-primary cu-py-10">《用于协议》</text>和
							<text @click="vk.myfn.gotoPage('/pages/oauth/yhxy/index','navigate')" class="cu-text-primary cu-border-bottom cu-border-primary cu-py-10">《隐私协议》</text>
						</label>
					</checkbox-group>
				</view>
				<view class="cu-w-100 cu-row cu-j-center cu-my-40">
					<text style="color: #f95221;" class="cu-font-big ">登录开始记账吧</text>
				</view>
				<u-popup :show="showPopup" mode="center" :safeAreaInsetBottom="false" :customStyle='{backgroundColor:"rgb(255,255,255,0)",width:"80%"}'>
					<view class="cu-p-20 cu-bg-white" style="border-radius: 40rpx;">
						<view class="cu-w-100 cu-row cu-j-center cu-py-20">登录提示</view>
						<view class="cu-w-100 cu-row cu-py-20 cu-font-sm" style="height: 100rpx;">
							阅读并同意
							<text class="cu-text-primary">《</text>
							<text @click="vk.myfn.gotoPage('/pages/oauth/yhxy/index','navigate')" class="cu-text-primary cu-border-bottom cu-border-primary">用于协议</text>
							<text class="cu-text-primary">》</text>
							和
							<text class="cu-text-primary">《</text>
							<text @click="vk.myfn.gotoPage('/pages/oauth/yhxy/index','navigate')" class="cu-text-primary cu-border-bottom cu-border-primary">隐私协议</text>
							<text class="cu-text-primary">》</text>
						</view>
						<view class="cu-w-100 cu-row cu-j-sb">
							<button @click="event('close')" size="mini" type="default">取消</button>
							<button @click="event('confirm')" size="mini" type="primary">确定</button>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	let vk = uni.vk;
	export default {
		computed: {
			getBackgroundStyle() {
				let style = {};
				style.background = "linear-gradient(45deg, " + this.main + ", " + this.secondary + ")";
				// 合并用户传递的背景色对象
				Object.assign(style, this.backgroundStyle);
				return style;
			}
		},
		data() {
			return {
				main: vk.getVuex('$app.color.main'),
				secondary: vk.getVuex('$app.color.secondary'),
				backgroundStyle: {
					color: "#FFF"
				},
				isChecked: false,
				showPopup: false,
			};
		},
		onLoad(options) {
			vk = uni.vk;
			this.init(options);
		},
		onShow() {
			this.init(undefined);
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.main = vk.getVuex('$app.color.main');
				this.secondary = vk.getVuex('$app.color.secondary');
			},
			event(type, data) {
				if (type === "checkboxChange") {
					this.isChecked = !this.isChecked;
				} else if (type === "close") {
					this.showPopup = false
				} else if (type === "confirm") {
					this.isChecked = !this.isChecked;
					this.showPopup = false
				}
			},
			// 微信登录
			loginByWeixin(type){
				// 校验是否勾选隐私协议
				if (!this.isChecked) {
					this.showPopup = true
					return
				}
				let that = this;
				vk.userCenter.loginByWeixin({
					data:{
						type
					},
					success: (data) => {
						if (data && data.code !== 0) {
							vk.alert(data.msg);
							return
						}
						that.data = data;
						vk.reLaunch("/pages/index/index");
						
					},
					fail:(data) => {
						console.log('fail',data)
						if(data && data.code === -1 && data.msg === "账号未注册") {
							vk.navigateTo("/pages/oauth/register/index");
						}
						else {
							vk.alert(data.msg);
						}
					}
				});
			},

		}
	};
</script>

<style lang="scss" scoped>

</style>